<template>
  <!-- 我是订单页面 -->
  <div class="order">
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="订单" />
      </van-sticky>
    </div>
    <!-- 订单内容展示-->
    <div class="order">
      <!-- 全部订单 -->
      <van-tabs v-model="active">
        <van-tab title="全部订单">
          <van-card
            v-for="item in orderData"
            :key="item.id"
            :title="item.customer.username"
            :tag="item.status"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :thumb="item.customer.userFace"
            :price="item.total+ '.00'"
            @click="toProduct(item.id)"
          >
            <template #tags>
              <van-tag class="sta">{{ item.orderTime | fmtDate_global}}</van-tag>
            </template>
          </van-card></van-tab
        >
        <!-- 待派单 -->
        <van-tab title="待派单">
          <van-card
            v-for="item in waitorderData"
            :key="item.id"
            :tag="item.status"
            :price="item.total + '.00'"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :title="item.customer.username"
            :thumb="item.customer.userFace"
            @click="toProduct(item.id)"
          >
            <template #tags>
              <van-tag class="sta">{{ item.orderTime | fmtDate_global}}</van-tag>
            </template>
          </van-card>
        </van-tab>
        <!-- 待接单 -->
        <van-tab title="待接单">
          <van-card
            v-for="item in orderData3"
            :key="item.id"
            :title="item.customer.username"
            :tag="item.status"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :thumb="item.customer.userFace"
            :price="item.total+ '.00'"
            @click="toProduct(item.id)"
          >
            <template #tags>
              <van-tag class="sta">{{ item.orderTime | fmtDate_global}}</van-tag>
            </template>
          </van-card></van-tab
        >
        <!-- 待确认 -->
        <van-tab title="待确认">
          <van-card
            v-for="item in confirmorderData"
            :key="item.id"
            :tag="item.status"
            :price="item.total + '.00'"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :title="item.customer.username"
            :thumb="item.customer.userFace"
            @click="toProduct(item.id)"
          >
            <template #tags>
              <van-tag class="sta">{{ item.orderTime | fmtDate_global}}</van-tag>
            </template>
          </van-card>
        </van-tab>
        <!-- 已完成 -->
        <van-tab title="已完成">
          <van-card
            v-for="item in orderData5"
            :key="item.id"
            :title="item.customer.username"
            :tag="item.status"
            :desc="
              item.address.province +
              item.address.city +
              item.address.area +
              item.address.address
            "
            :thumb="item.customer.userFace"
            :price="item.total+ '.00'"
            @click="toProduct2(item.id)"
          >
            <template #tags>
              <van-tag class="sta">{{ item.orderTime | fmtDate_global}}</van-tag>
            </template>
          </van-card>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
// 引入vuex辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      customerId: "",
    };
  },
  computed: {
    // 获取产品数据
    ...mapState("order", ["orderData"]),
    ...mapState("order3", ["orderData3"]),
    ...mapState("order5", ["orderData5"]),
    ...mapState("waitorder", ["waitorderData"]),
    ...mapState("confirmorder", ["confirmorderData"]),
  },
  methods: {
    // 跳转到订单详情页面 并且传递参数
    toProduct(orderId) {
      // 使用编程式导航进行路由的跳转
      this.$router.push({
        // 路径
        path: "/manager/onorder",
        // 参数的传递
        query: {
          orderId,
        },
      });
    },
    // 跳转到订单详情页面 并且传递参数
    toProduct2(orderId) {
      // 使用编程式导航进行路由的跳转
      this.$router.push({
        // 路径
        path: "/manager/overorder",
        // 参数的传递
        query: {
          orderId,
        },
      });
    },
    // 引入根据栏目id获取产品数据的方法
    ...mapActions("order", ["getAllorderData"]),
    ...mapActions("order3", ["getAllorderData3"]),
    ...mapActions("order5", ["getAllorderData5"]),
    ...mapActions("waitorder", ["getAllWAITOrderData"]),
    ...mapActions("confirmorder", ["getAllComfirmOrderData"]),
    ...mapActions("user", ["getUserInfo"]),

    // 获取全部订单数据
    queryorder() {
      let data = {
        page: 1,
        pageSize: 100,
        customerId:this.customerId
      };
      // 调用获取产品数据的方法
      this.getAllorderData(data);
    },
    // 获取待接单数据
    queryorder3() {
      let data = {
        page: 1,
        pageSize: 100,
        status: "待接单",
        customerId:this.customerId
      };
      // 调用获取产品数据的方法
      this.getAllorderData3(data);
    },
    // 获取已经完订单数据
    queryorder5() {
      let data = {
        page: 1,
        pageSize: 100,
        status: "已完成",
        customerId:this.customerId
      };
      // 调用获取产品数据的方法
      this.getAllorderData5(data);
    },
    // 待派单
    getWaitOrderData() {
      let data = {
        page: 1,
        pageSize: 100,
        status: "待派单",
        customerId:this.customerId
      };
      this.getAllWAITOrderData(data);
    },
    // 待确认
    getComfirmOrderData() {
      let data = {
        page: 1,
        pageSize: 100,
        status: "待确认",
        customerId:this.customerId
      };
      this.getAllComfirmOrderData(data);
    },
  },
  created() {
    // 自动获取产品数据
    this.getUserInfo().then((res) => {
      // 确保能够拿到用户id后再去拿数据
      this.customerId = res.data.data.id;
      this.getWaitOrderData();
      this.getComfirmOrderData();
      this.queryorder();
      this.queryorder3();
      this.queryorder5();
    });
  },
};
</script>

<style scoped>
.sta {
  /* color: rgb(187, 91, 91); */
  color: rgb(104, 89, 89);
  background: none;
  /* float: right; */
  /* margin: 10px 10px; */
}
.van-card__desc {
  margin-top: 10px;
  font-size: 15px;
}
.van-card__price {
  margin-top: 10px;
  font-size: 15px;
  float: right;
  color: rgb(187, 91, 91);
}
.van-card {
  /* box-shadow: 0 0 10px #b490ca; */
  font-size: 16px;
  border-radius: 15px;
  background-color: #f2c59412;
}
</style>